<template>
  <div class="data-panel data-summary">
    <div class="title">数据看板</div>

    <el-row :gutter="100">
      <el-col :span="6">
        <div class="count-card">
          <div class="icon-wrap new-color">
            <svg-icon name="new-users"></svg-icon>
          </div>
          <div class="right-desc">
            <div class="label">今日订单数量</div>
            <div class="num">
              <avue-count-up
                :end="countList?.order_count || 0"
                :start="0">
              </avue-count-up>
            </div>
            <div class="compare">
              <span class="cp-label">同比</span>
              <span class="cp-num">
                <avue-count-up
                  :end="`${order_count}%`"
                  :decimals="2"
                  :start="0">
                </avue-count-up>
              </span>
              <i
                v-if="order_count >= 0"
                class="arrow-icon text-success el-icon-top"></i>
              <i
                v-else
                class="arrow-icon text-danger el-icon-bottom"></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="count-card">
          <div class="icon-wrap active-color">
            <svg-icon name="active-users"></svg-icon>
          </div>
          <div class="right-desc">
            <div class="label">今日新增用户数量</div>
            <div class="num">
              <avue-count-up
                :end="countList?.new_user_count || 0"
                :start="0">
              </avue-count-up>
            </div>
            <div class="compare">
              <span class="cp-label">同比</span>
              <span class="cp-num">
                <avue-count-up
                  :end="`${new_user_count}%`"
                  :decimals="2"
                  :start="0">
                </avue-count-up>
              </span>
              <i
                v-if="new_user_count >= 0"
                class="arrow-icon text-success el-icon-top"></i>
              <i
                v-else
                class="arrow-icon text-danger el-icon-bottom"></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="count-card">
          <div class="icon-wrap">
            <svg-icon name="all-users"></svg-icon>
          </div>
          <div class="right-desc">
            <div class="label">总用户数</div>
            <div class="num">
              <avue-count-up
                :end="countList?.user_count || 0"
                :start="0">
              </avue-count-up>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="count-card">
          <div class="icon-wrap">
            <svg-icon name="all-users"></svg-icon>
          </div>
          <div class="right-desc">
            <div class="label">总金额</div>
            <div class="num">
              <avue-count-up
                :end="countList?.price_sum / 10000 || 0"
                :start="0">
              </avue-count-up>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    countInfo: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      countList: [],
      order_count: 0,
      new_user_count: 0,
    }
  },
  watch: {
    countInfo: {
      handler(newVal) {
        this.countList = newVal[0]

        this.getNum(newVal)
      },
    },
  },
  mounted() {},
  methods: {
    getNum(newVal) {
      newVal[0]?.order_count === 0
        ? (this.order_count = 0)
        : newVal[1]?.order_count === 0
        ? (this.order_count = 100)
        : (this.order_count = (
            ((newVal[0]?.order_count - newVal[1]?.order_count) / newVal[1]?.order_count) *
            100
          ).toFixed(2))

      newVal[0]?.new_user_count === 0
        ? (this.new_user_count = 0)
        : newVal[1]?.new_user_count === 0
        ? (this.new_user_count = 100)
        : (this.new_user_count = (
            ((newVal[0]?.new_user_count - newVal[1]?.new_user_count) / newVal[1]?.new_user_count) *
            100
          ).toFixed(2))
    },
  },
}
</script>

<style lang="scss" scoped>
.data-panel {
  margin-bottom: 40px;
  .title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .el-row {
    .el-col {
      .count-card {
        @include flexbox($ai: center);
        border: 1px solid #eee;
        padding: 20px 0 20px 20px;
        height: 100px;
        .icon-wrap {
          @include flexbox($jc: center, $ai: center);
          width: 60px;
          height: 60px;
          margin-right: 20px;
          border-radius: 60px;
          text-align: center;
          background-color: #6f77fc;
          color: #fff;
          &.new-color {
            background-color: #2ec74b;
          }
          &.active-color {
            background-color: #00cad6;
          }
          .svg-icon {
            font-size: 23px;
            color: #fff;
          }
          .all-user-icon {
            fill: #fff;
            stroke: #fff;
          }
        }
        .right-desc {
          .label {
            margin-bottom: 10px;
            color: #666;
          }
          .num {
            margin-bottom: 10px;
            font-size: 22px;
          }
          .compare {
            .cp-label {
              margin-right: 10px;
              color: #666;
            }
            .cp-num {
              font-size: 14px;
            }
            .arrow-icon {
              margin-left: 5px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
